<template>
   <div class="page-box">
      <div
         class="page-title"
         style="display: flex; justify-content: space-between; align-items: center"
      >
         <div>菜单管理</div>
         <el-button
            style="background: #6860ff; color: #fff"
            @click="onTapOtherPayment"
         >
            新增菜单
         </el-button>
      </div>

      <div class="page-search">
         <div
            class="search-box flex_start_center"
            :style="{ height: IsHeight }"
         >
            <el-input
               v-model="authList.name"
               placeholder="请输入菜单名称"
               style="width: 200px; margin-right: 10px; margin-bottom: 10px"
               suffix-icon="Search"
            />
            <el-select
               v-model="authList.status"
               placeholder="请选择"
               clearable
               style="width: 200px; margin-right: 10px; margin-bottom: 10px"
            >
               <el-option
                  label="启用"
                  value="1"
               />
               <el-option
                  label="禁用"
                  value="0"
               />
            </el-select>
            <el-select
               v-model="authList.type"
               placeholder="菜单类型"
               clearable
               style="width: 200px; margin-right: 10px; margin-bottom: 10px"
            >
               <el-option
                  label="目录"
                  value="0"
               />
               <el-option
                  label="菜单"
                  value="1"
               />
               <el-option
                  label="按钮"
                  value="2"
               />
            </el-select>
         </div>

         <div class="search-btn">
            <div
               class="btn_item"
               @click="handleClickHeight"
            >
               <img
                  class="btn_img"
                  src="@/assets/sx.png"
                  alt=""
               />
               <span> 高级筛选 </span>
            </div>
         </div>
      </div>
   </div>

   <div class="table-box">
      <el-table
         :data="tabeData"
         style="width: 100%"
         border
         row-key="id"
         height="800"
         lazy
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
         <el-table-column
            align="center"
            prop="name"
            label="菜单名称"
            width="auto"
         />
         <el-table-column
            align="center"
            prop="type"
            label="菜单类型"
            width="auto"
         >
            <template #default="scope">
               {{ scope.row.type === 1 ? "菜单" : scope.row.type === 2 ? "按钮" : "路由" }}
            </template>
         </el-table-column>
         <el-table-column
            align="center"
            prop="auth_code"
            label="权限标识"
            width="auto"
         />
         <el-table-column
            align="center"
            prop="icon"
            label="菜单图标"
            width="180"
         >
            <!-- <template #default="scope">
               <el-icon
                  v-if="scope.row.icon"
                  :size="scope.row.iconSize || 16"
                  :color="scope.row.iconColor || '#999'"
               >
                  <component :is="scope.row?.icon" />
               </el-icon>
               <span
                  v-else
                  class="text-gray-400"
                  >-</span
               >
            </template> -->
         </el-table-column>
         <el-table-column
            align="center"
            prop="show_sort"
            label="排序"
            width="120"
         />
         <el-table-column
            align="center"
            label="状态"
            width="auto"
         >
            <template #default="scope">
               <el-tag
                  v-if="scope.row.status === 1"
                  type="success"
                  >正常</el-tag
               >
               <el-tag
                  v-else
                  type="danger"
                  >停用</el-tag
               >
            </template>
         </el-table-column>
         <el-table-column
            align="center"
            prop="paths"
            label="菜单地址"
            width="180"
         />
         <el-table-column
            align="center"
            prop="route_urls"
            label="对应接口"
            width="180"
         />
         <el-table-column
            align="center"
            prop="created_at"
            label="创建时间"
            width="180"
         />
         <el-table-column
            align="center"
            prop="phone"
            label="操作"
            width="auto"
         >
            <template #default="scope">
               <el-button
                  color="#6860FF"
                  size="small"
                  @click="handleAdd(scope.row)"
               >
                  新增
               </el-button>
               <el-button
                  color="#6860FF"
                  size="small"
                  @click="handleEdit(scope.row)"
               >
                  编辑
               </el-button>
               <!-- <el-button
                  type="danger"
                  size="small"
               >
                  删除
               </el-button> -->
            </template>
         </el-table-column>
      </el-table>
   </div>
   <MenuPopup
      ref="menuPopupRef"
      @getMenuList="getAlltabeData"
   />
</template>

<script setup lang="ts">
   import { ref, onMounted, watch } from "vue";
   import MenuPopup from "./components/MenuPopup.vue";
   import api from "@/api/index.js";
   import MenuList from "./systemSettings.ts";
   const menuPopupRef = ref<any>(null);
   let IsHeight = ref<number | string>(0);
   const pageData = ref({
      page_size: 10,
      page: 1,
      house_type: "",
      category: "",
      keywords: "",
   });
   const authList = ref({
      name: "",
      status: "",
      type: "",
   });
   const total = ref(0);
   const tabeData = ref<MenuList[]>([]);
   // 侦听动态分页
   watch(
      () => {
         return pageData.value;
      },
      () => {
         getAlltabeData();
      },
      { deep: true }
   );

   // 搜索关键词监听
   watch(
      () => pageData.value,
      (newVal) => {
         getAlltabeData();
      }
   );

   const onTapOtherPayment = () => {
      menuPopupRef.value.openLoading();
   };

   let nub = ref<number>(0);
   const handleClickHeight = () => {
      nub.value++;
      if (nub.value % 2 == 1) {
         IsHeight.value = "44px";
      } else {
         IsHeight.value = "0px";
      }
   };
   // 新增菜单
   const handleAdd = (row: MenuList, isEdit: boolean = false) => {
      menuPopupRef.value.openLoading(row.id, isEdit);
   };
   onMounted(() => {
      getAlltabeData();
   });
   // 获取仓库列表
   const getAlltabeData = async () => {
      loading.value = true;
      try {
         const res = await api.authority.getAuthList({
            ...pageData.value,
         });
         tabeData.value = Array.isArray(res.data) ? res.data : [];
      } catch (error) {
         console.error("获取菜单列表失败", error);
      } finally {
         loading.value = false;
      }
   };

   const loading = ref(false);
   // 编辑菜单
   const handleEdit = (row: MenuList, isEdit: boolean = true) => {
      menuPopupRef.value.openLoading(row.id, isEdit);
   };
</script>

<style lang="scss" scoped>
   .search-box {
      padding: 0;
   }
   .btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 5px;
   }

   .main-warehouse {
      font-weight: bold;
      color: #333;
   }

   // 输入框样式
   :deep(.el-input__wrapper) {
      background-color: rgba(250, 252, 251, 1);
   }

   //表格样式
   :deep(.el-table) {
      --el-table-header-bg-color: rgba(235, 236, 240, 1);
      // height: 620px;
   }

   :deep(.el-table thead) {
      color: #444;
   }

   // 子仓库行样式
   :deep(.sub-warehouse-row) {
      background-color: #fef6e5;
   }

   //分页样式
   .pagination {
      width: calc(100% - 250px);
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding-top: 10px;
      border-top: 1px solid #98989848;
   }

   :deep(.el-pagination.is-background .el-pager li.is-active) {
      background-color: #000 !important;
   }
</style>
